<template>
  <MainSlot>
    <template v-slot:searchForm>
      <SearchForm v-if="formItemList.length" :formItemList="formItemList" :unfoldFlag="unfoldFlag" @search="search" @isUnfold="
          (v) => {
            unfoldFlag = v;
          }
        ">
      </SearchForm>
    </template>
    <template v-slot:table>
      <div class="putPondList" v-loading="loading">
        <div class="info" v-for="(item, index) in dataList" :key="index">
          <div class="title">
            <span class="name">{{ item.cwarehousename || "鱼塘名称" }}</span>
          </div>
          <div class="options">
            <div class="numTotal">
              <div class="total">
                <span class="label">投塘总条数:</span>{{ item.vbdef1sum || 0 }}尾
              </div>
              <div class="total">
                <span class="label">总投塘重量:</span>{{ item.nnumsum || 0 }}斤
              </div>
              <div class="total">
                <span class="label">批次编号:</span>{{ item.vproductbatch || "--" }}
              </div>
            </div>
            <div class="option">
              <el-button class="item" type="primary" plain @click="lookView(item)">投塘详细信息</el-button>
            </div>
          </div>
          <template v-if="item.dtlList">
            <div class="dataList" v-for="(info, index) in item.dtlList" :key="index + 'info'">
              <div class="data">
                <div class="row">
                  <span class="label">投塘品种：</span>
                  <span class="tag">{{ info.cmaterialoname || "--" }}</span>
                </div>
                <div class="row">
                  <span class="label">投塘条数：</span>
                  <span class="tag">{{ info.vbdef1sum || 0 }}条</span>
                </div>
                <div class="row">
                  <span class="label">投塘重量：</span>
                  <span class="tag">{{ info.nnumsum || 0 }}斤</span>
                </div>
                <div class="row">
                  <span class="label">在塘条数：</span>
                  <span class="tag">{{ info.zvbdef1sum1 >= 0 ? info.zvbdef1sum1 : 0 }}条</span>
                </div>
                <!-- <div class="row">
                  <span class="label">转塘条数：</span>
                  <span class="tag">{{ info.zvbdef1sum2 || 0 }}条</span>
                </div>-->
                <div class="row">
                  <span class="label">直鱼条数：</span>
                  <span class="tag">{{ info.zvbdef1sum3 || 0 }}条</span>
                </div> 
              </div>
            </div>
          </template>
        </div>
      </div>
    </template>
    <template v-slot:pagination>
      <Pagination @current-change="handleCurrentChange" :page="page" :total="total">
      </Pagination>
    </template>
    <template v-slot:dialogModule>
      <DataInfo :dialogVisible="dialogVisible_lookView" :data="lookViewData" @closeDialog="closeDataInfoDialog">
      </DataInfo>
    </template>
  </MainSlot>
</template>
<script>
import MainSlot from "@/components-production-management/MainSlot";
import Pagination from "@/components-production-management/Pagination";
import SearchForm from "@/components-production-management/SearchForm";
import TableData from "@/components-production-management/TableData";
//NC批次
import ncproductionApi from "@/api/production-management-nc/index";
import ncBasicInfoApi from "@/api/nc-basic-info/index";
import DataInfo from "./components/dataInfo.vue";
import { getOneYearAgo, getCurrentDate } from "@/utils/time";

export default {
  components: { MainSlot, Pagination, SearchForm, TableData, DataInfo },
  data() {
    return {
      unfoldFlag: false,
      loading: false,
      dialogVisible_lookView: false,
      lookViewData: {},
      page: 1,
      total: 0,
      materialList: [],
      StordocList: [],
      searchFormData: {
        startDate: getOneYearAgo(),
        endDate: getCurrentDate(),
      },
      dataList: [],
      formItemList: [
        {
          label: "批次名称",
          type: "input",
          param: "vproductbatch",
          multiple: false,
          isShow: true,
        },
        {
          label: "塘号名称",
          type: "select",
          selectOptions: [],
          param: "cwarehouseid",
          defaultSelect: "", // 下拉框默认选中项
          multiple: false,
          isShow: true,
        },
        {
          label: "投塘品种",
          type: "select",
          selectOptions: [],
          param: "cmaterialoid",
          defaultSelect: "", // 下拉框默认选中项
          multiple: false,
          isShow: true,
        },
        {
          label: "日期查询",
          type: "daterange",
          param: "dateTime",
          defaultSelect: [getOneYearAgo(), getCurrentDate()],
          multiple: false,
          isShow: true,
        },
      ],
    };
  },
  mounted() {
    this.queryPageByCondition();
    this.queryMaterial();
    this.queryStordoc();
  },
  methods: {
    queryMaterial() {
      ncBasicInfoApi
        .queryMaterial({
          pk_parent: "1001A110000000003G58",
        })
        .then((res) => {
          this.materialList = res.data;
          this.setFormOptions();
        });
    },
    queryStordoc() {
      ncBasicInfoApi.queryStordoc({}).then((res) => {
        this.StordocList = res.data;
        this.setFormOptions();
      });
    },
    setFormOptions() {
      let list = JSON.parse(JSON.stringify(this.formItemList));
      this.formItemList = [];
      list.forEach((item, index) => {
        if (item.param.indexOf("cmaterialoid") !== -1) {
          let selectOptions = this.materialList.map((data) => {
            return {
              text: data.name,
              value: data.pk_material,
            };
          });
          item.selectOptions = selectOptions;
        }
        if (item.param.indexOf("cwarehouseid") !== -1) {
          let selectOptions = this.StordocList.map((data) => {
            return {
              text: data.name,
              value: data.pk_stordoc,
            };
          });
          item.selectOptions = selectOptions;
        }
      });
      this.$nextTick(() => {
        this.$set(this, "formItemList", list);
      });
    },

    queryPageByCondition() {
      let params = {
        page: this.page,
        size: 3,
        entity: {
          ...this.searchFormData,
        },
      };
      this.loading = true;
      ncproductionApi
        .queryInputPondInfo(params)
        .then((res) => {
          this.loading = false;
          if (res.success == 1) {
            this.dataList = res.data.content || [];
            this.total = res.data.totalElements;
            if (res.data.totalPages && this.page > res.data.totalPages) {
              this.page = res.data.totalPages;
              this.queryPageByCondition();
            }
          } else {
            this.$message.warning(res.message || "分页查询失败");
          }
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    search(data) {
      this.page = 1;
      if (data.dateTime && data.dateTime.length) {
        data.startDate = data.dateTime[0];
        data.endDate = data.dateTime[1];
      }
      delete data.dateTime;
      this.searchFormData = { ...data };

      for (let key in this.searchFormData) {
        if (!this.searchFormData[key]) {
          this.searchFormData[key] = null;
        }
      }
      console.log(this.searchFormData, data, "this.searchFormData");
      this.queryPageByCondition();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.queryPageByCondition();
    },
    //查看详情
    async lookView(row) {
      let obj = JSON.parse(JSON.stringify(row));
      this.lookViewData = obj;
      this.dialogVisible_lookView = true;
      // let res = await ncproductionApi.queryMaterialDetail({
      //   orderId: obj.cgeneralhid,
      // });
      // if (res.success) {
      //   this.lookViewData = res.data || [];
      //   this.dialogVisible_lookView = true;
      // }
    },
    closeDataInfoDialog() {
      this.dialogVisible_lookView = false;
      this.lookViewData = {};
      this.queryPageByCondition();
    },
  },
};
</script>
<style lang="scss" scoped>
.putPondList {
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #ffffff;

  .title {
    width: 100%;
    padding: 0 15px;
    background: #4b8bc9;
    line-height: 40px;
    font-size: 14px;
    color: #ffffff;
  }

  .options {
    height: 40px;
    padding: 0 15px;
    background: #dbf0f9;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .label {
      color: #4b8bc9;
    }

    .numTotal {
      display: flex;
      justify-content: flex-start;
      align-items: center;

      .total {
        margin-right: 15px;
        color: #666666;
      }
    }

    .option {
      display: flex;
      justify-content: flex-end;
      align-items: center;

      .item {
        margin-left: 15px;

        .label {
          margin-right: 10px;
          color: #4b8bc9;
        }
      }
    }
  }

  .dataList {
    width: 100%;
    padding: 0 15px;
    background-color: #f8feff;
    transition: all 0.5s;
    cursor: pointer;

    &:hover {
      transform: translateX(-2px);
      background-color: #e9f2f3;
    }

    .data {
      height: 40px;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      flex-wrap: nowrap;
      text-align: left;
      color: #666666;
      border-bottom: 1px solid #dfdfdf;

      .row {
        width: calc(100% / 3);

        .label {
          color: #4b8bc9;
        }
      }
    }
  }
}
</style>